<template>
  <div>
    <h1>订单列表页面</h1>
    <el-tabs v-model="searchObj.status" @tab-click="handleClick">
      <el-tab-pane
        :label="item.name + '(' + item.num + ')'"
        v-for="item in $store.state.order.ordersStatic"
        :name="item.name"
        :key="item.name"
      >
      </el-tab-pane>
    </el-tabs>
    <el-form :inline="true" :model="searchObj" class="demo-form-inline" ref="searchForm">
      <el-form-item label="配送方式" prop="pickupInstore">
        <el-radio-group v-model="searchObj.pickupInstore" @change="getOrderList()">
          <el-radio :label="''">全部</el-radio>
          <el-radio :label="0">自提</el-radio>
          <el-radio :label="1">配送</el-radio>
        </el-radio-group> </el-form-item
      ><br />
      <el-form-item label="订单编号" prop="orderNum">
        <el-input v-model="searchObj.orderNum"> </el-input>
      </el-form-item>
      <el-form-item label="商品编号" prop="ParentOrderID">
        <el-input v-model="searchObj.ParentOrderID"> </el-input>
      </el-form-item>
      <el-form-item label="所属门店" prop="shoppingAdd">
        <el-input v-model="searchObj.shoppingAdd"> </el-input> </el-form-item
      ><br />
      <el-form-item label="会员账号" prop="customerId">
        <el-input v-model="searchObj.customerId"> </el-input>
      </el-form-item>
      <el-form-item label="收货人" prop="consignee">
        <el-input v-model="searchObj.consignee"> </el-input>
      </el-form-item>
      <el-form-item label="下单时间" prop="createStart">
        <el-date-picker
          v-model="searchObj.createStart"
          value-format="yyyy-MM-dd HH:mm:SS"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="" prop="createEnd">
        <el-date-picker
          v-model="searchObj.createEnd"
          value-format="yyyy-MM-dd HH:mm:SS"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div>
      <el-link
        type="primary"
        style="margin-right: 35px"
        @click="
          $refs.searchForm.resetFields();
          getOrderList();
        "
        >重置</el-link
      >
      <el-button type="primary" @click="getOrderList()">搜索</el-button>
    </div>

    <el-table
      :data="orderList"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
      ref="tab"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="OrderNum" label="订单编号"> </el-table-column>
      <el-table-column prop="createAt" label="下单时间"> </el-table-column>
      <el-table-column prop="customerId" label="会员账号"> </el-table-column>
      <el-table-column prop="total_amount" label="订单总额"> </el-table-column>
      <el-table-column prop="shoppingAdd" label="所属门店"> </el-table-column>
      <el-table-column prop="status" label="订单状态" width="120">
        <template slot-scope="scope">
          <span style="color: limegreen" v-if="scope.row.status == '已完成'">{{
            scope.row.status
          }}</span>
          <span style="color: orangered" v-else-if="scope.row.status == '待付款'">{{
            scope.row.status
          }}</span>
          <span v-else>{{ scope.row.status }}</span>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <router-link :to="'/admin/orderdetail/' + scope.row.OrderNum">查看</router-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :total="pagnation.total"
      @current-change="handlePageChange"
    >
    </el-pagination>
  </div>
</template>
<script>
import { GetOrderList } from "@/api/order.js";
export default {
  created() {
    this.$store.dispatch("getOrdersStatic");
    this.getOrderList();
  },
  data() {
    return {
      searchObj: {
        status: "",
        current: "",
        pickupInstore: "",
        orderNum: "",
        ParentOrderID: "",
        shoppingAdd: "",
        customerId: "",
        consignee: "",
        createStart: "",
        createEnd: "",
      },
      orderList: [],
      pagnation: {},
      Json_fields: {
        订单状态: "status",
        是否自提: {
          field: "pickupInstore",
          callback: (value) => {
            return value == "1" ? "是" : "否";
          },
        },
        订单编号: "OrderNum",
        商品编号: "ParentOrderID",
        用户id: "customerId",
        收货人: "consignee",
        所属门店: "shoppingAdd",
        订单总额: "total_amount",
        下单时间: "createAt",
      },
      DetailsForm: [],
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.DatailsForm = val;
    },
    handlePageChange(currentPage) {
      this.searchObj.current = currentPage;
      this.getOrderList();
    },
    handleClick(tab, event) {
      console.log(tab, event);
      this.getOrderList();
    },
    getOrderList() {
      if (this.searchObj.status == 0 || this.searchObj.status == "全部") {
        this.searchObj.status = "";
      }
      GetOrderList(this.searchObj)
        .then((res) => {
          // console.log("订单列表信息", res.data);
          this.orderList = res.data.data;
          this.pagnation = res.data.pagnation;
          this.DetailsForm = res.data.data;
          this.$refs.tab.toggleAllSelection();
        })
        .catch((err) => {
          console.log("获取订单信息失败", err);
        });
    },
  },
  watch: {
    searchObj: {
      handler() {
        this.getOrderList();
      },
      deep: true,
    },
  },
};
</script>
<style scoped></style>
